<template>
  <div>
    <!-- nav-bar
      this.$router.push() : 路由跳转
      this.$router.back() : 路由后退  ===== 页面中的后退按钮
    -->
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <!-- @input是由van-search组件提供的。 -->
    <van-search
      v-model.trim="keyword"
      show-action
      @input="hInput"
      placeholder="请输入搜索关键词"
    >
      <!-- #action  ==== slot="action" -->
      <!-- <template slot="action">
        <div>搜索</div>
      </template> -->
      <div slot="action" @click="hSearch">搜索</div>
    </van-search>

    <!-- 2. 搜索建议 -->
    <!-- v-if="suggestions.length"通过搜索栏的长度判断- 如果当前开始去搜索内容，则不显示搜索历史，而显示联想建议。  -->
    <!-- - 如果当前并没有搜索内容，则显示搜索搜索历史，不显示联想建议。 -->
    <van-cell-group v-if="suggestions.length">
      <van-cell
        v-for="(item, idx) in cSuggestions"
        :key="idx"
        icon="search"
        @click="hClickSuggestion(idx)"
      >
        <div v-html="item"></div>
      </van-cell>
      <!-- <van-cell title="单元格" icon="search" />
      <van-cell title="单元格" icon="search" /> -->
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />

      <van-cell
        v-for="(item, idx) in historys"
        :key="idx"
        :title="item"
        @click="$router.push('/searchResult?keyword=' + item)"
      >
        <van-icon name="close" @click.stop="delHistory(idx)"></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getHistory, saveHistory } from '../../utils/storageHistory'
import { heightLight } from '@/utils/index.js'
import { getSuggestion } from '../../api/search'
export default {
  name: 'Search',
  data () {
    return {
      timer: null,
      str: '<span style="color:red">abc</span>',
      keyword: '',
      suggestions: [], // 联想建议
      historys: getHistory() || [], // 保存 历史
      startTime: 0 // 最近一次成功调用ajax的时间
    }
  },
  methods: {
    // 用户的输入发生了变化
    // 防抖
    // hInput () {
    //   clearTimeout(this.timer)
    //   console.log(this.keyword)
    //   this.timer = setTimeout(() => {
    //     this.doAjax()
    //   }, 200)
    // },
    // 节流
    hInput () {
      const dt = Date.now() // 获取当前的时间戳
      if (dt - this.startTime > 500) {
        this.doAjax()
        this.startTime = dt
      } else {
        console.log('当前的时间戳是', dt, '距离上次执行次数不够500所以不执行')
      }
    },
    // 用户在搜索框输入的内容发生了变化
    async doAjax () {
      // 如果用户没有输入任何内容，则清空建议，不要发请求了
      if (this.keyword === '') {
        this.suggestions = []
        return
      }
      try {
        const res = await getSuggestion(this.keyword)
        // console.log('停一下', res)
        this.suggestions = res.data.data.options
      } catch (err) {
        console.log(err)
      }
    },
    // 添加一条历史
    addHistory (keyword) {
      // 判断一下是否有重复的如果有就删除
      const idx = this.historys.findIndex(item => item === keyword)
      if (idx > -1) {
        this.historys.splice(idx, 1)
      }
      // 放在数组的前面
      this.historys.unshift(keyword)
      // todo:持久化历史记录
      saveHistory(this.historys)
    },
    hSearch () {
      if (this.keyword) {
        // 增加一条历史
        this.addHistory(this.keyword)
        // 页面跳转
        this.$router.push('/searchResult?keyword=' + this.keyword)
      }
    },
    // 用户点击了搜索建议
    hClickSuggestion (idx) {
      // 增加一条历史
      this.addHistory(this.suggestions[idx])
      // 调转到搜索页
      this.$router.push('/searchResult?keyword=' + this.suggestions[idx])
    },
    // 删除
    delHistory (idx) {
      this.historys.splice(idx, 1)
      // 持久化历史记录
      saveHistory(this.historys)
    }
  },
  computed: {
    cSuggestions () {
      // this.suggestions中的每一项都去做替换
      // suggestions中的每一项   ====> heightLight(suggestions中的每一项, this.keyword)
      return this.suggestions.map(item => {
        return heightLight(item, this.keyword)
      })
    }
  }

}
</script>
